<template>
	
	<view >	
		<view class="uni-tab-bar">	
			<scroll-view class="uni-swiper-tab" scroll-x="true" >
				<block v-for="(tab,indexTab) in tabbar" :key="indexTab">
					<view class="swiper-tab-list" :class="{'active':tabIndex==indexTab}" >
						<text class="uni-tab-item-title" 
						@tap="tabtab(indexTab)">
						{{tab.name}}
						</text>	
					</view>
				</block>
			</scroll-view>
		</view>
		
		<view class="box1">
			<view class="box2"></view>
		</view>
			
			<view class="u-demo">
				<view class="u-demo-wrap">
					<view class="u-demo-title">演示效果</view>
					<view class="u-demo-area">
						<u-number-box v-model="value" :bg-color="bgColor" :color="color" :min="0"
						:step="step" :disabled="disabled" @change="change"></u-number-box>
					</view>
				</view>
			</view>
		
		
		
		
	<!-- 	<block v-for="(item,index) in listData" :key="index">
			<indexList :item="item" :index="index"></indexList>  
			<index_list :item="item" :index="index"></index_list> 
		</block> -->
	</view>
</template>

<script>
	import indexList from "../../components/index_list/index_list.vue"
	export default {
		components:{
			indexList
		},
		data() {
			return {
				tabIndex:0,
				tabbar:[
					{name:"关注",id:"guanzhu"	},
					{name:"推荐",id:"tuijian"	},
					{name:"体育",id:"tiyu"		},
					{name:"热点",id:"redian"	},
					{name:"财经",id:"caijing"	},
					{name:"娱乐",id:"yule"		},
				],
				listData:[
					{ /* 图片的情况*/
						userphoto:"../../static/shuai.png",/* 头像 */
						username:"孟111美岐",/* 昵称 */
						attention:false, /* 是否关注 */
						title:"孟美岐最美", /* 标题 */
						type:"img", /* 图片还是视频 */
						titlephoto:"../../static/timg.jpg" ,/*, 封面 */
						infonum:{
							index:0,/* 0误操作，1顶  2踩 */
							smile:101,/* 笑脸 */
							cry:10,/* 哭脸 */
						},
						commentnum:100,/* 评论数 */
						sharenum:120 ,/* 转发数 */
					},
					{  /* 视频的情况*/
						userphoto:"../../static/shuai.png",/* 头像 */
						username:"孟美岐",/* 昵称 */
						attention:true, /* 是否关注 */
						title:"孟美岐最美", /* 标题 */
						type:"video", /* 图片还是视频 */
						titlephoto:"../../static/timg.jpg" ,/*, 封面 */
						playnum:1000000,/* 播放次数 */
						long:"5:50",
						infonum:{
							index:1,/* 0无操作，1顶  2踩 */
							smile:101,/* 笑脸 */
							cry:10,/* 哭脸 */
						},
						commentnum:100,/* 评论数 */
						sharenum:120 ,/* 转发数 */
					},
					{  /* 视频的情况*/
						userphoto:"../../static/shuai.png",/* 头像 */
						username:"吴宣仪",/* 昵称 */
						attention:true, /* 是否关注 */
						title:"孟美岐最美", /* 标题 */
						type:"video", /* 图片还是视频 */
						titlephoto:"../../static/timg.jpg" ,/*, 封面 */
						playnum:1000000,/* 播放次数 */
						long:"5:50",
						infonum:{
							index:0,/* 0无操作，1顶  2踩 */
							smile:101,/* 笑脸 */
							cry:10,/* 哭脸 */
						},
						commentnum:100,/* 评论数 */
						sharenum:120 ,/* 转发数 */
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			tabtab(indexTab){
				console.log("值：",indexTab)
				this.tabIndex=indexTab
			}

		}
	}
</script>

<style lang="scss" scoped>
.swiper-tab-list{
	font-weight: bold;/* 字体加粗 */
}
// .box1{
// 	// width: 500rpx;
// 	// height: 500rpx;
// 	background-color: #09BB07;
// 	display: flex;
// 	padding: 50rpx;
// }
// .box2{
// 	width: 300rpx;
// 	height: 200rpx;
// 	background-color: #007AFF;
// 	margin: auto;
// }

</style>
